<template>
  <div class="news-wrapper" v-loading="loading" element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div v-for="news in newsArray" :key="news.id">
      <news-info :author_name="news.author_name" :id="news.id" :title="news.title"
                 :published_at="news.published_at" :summary="news.summary"
                 :author_avatar="news.author_avatar" :cover="news.cover"></news-info>
    </div>
  </div>
</template>

<script>

import NewsInfo from '../components/NewsInfo'

export default {
  name: 'newsList',
  data () {
    return {
      newsArray: [],
      loading: true
    }
  },
  created () {
  },
  components: {
    NewsInfo
  },
  mounted () {
    this.getData(this.$route.params.keyword)
  },
  updated () {
    console.log('gengxinle')
  },
  methods: {
    getData (keyword) {
      console.log('newsList.keyword=' + keyword)
      this.$http.get(this.$api.newsList, { params: { keyword: keyword } }).then(data => {
        this.newsArray = data
      })
      this.loading = false
    }
  }
}
</script>

<style scoped lang="less">
  .news-wrapper {
    .flex-display;
  }
</style>
